<template>
  <!-- 我的  text-red-800-->
  <div class="me text-red-400 dark:text-green-400">
    <!-- 设置 -->
    <van-icon name="setting-o" class="set" @click="information" />
    <div class="head">
      <p><img :src="avatarUrl" alt="" /></p>
      <p>{{ nickName }}</p>
    </div>
    <!-- 我的订单 -->
    <van-cell title="我的订单" is-link value="全部订单" to="myOrder" />
    <van-grid :column-num="4">
      <van-grid-item
        v-for="value in myorder"
        :key="value.id"
        :icon="value.icon"
        :text="value.name"
        to="myOrder"
      />
    </van-grid>
    <!-- 我的优惠卷 -->
    <van-cell title="我的优惠卷" is-link value="全部优惠卷" to="/coupon" />
    <van-grid :column-num="3">
      <van-grid-item
        v-for="value in coupon"
        :key="value.id"
        :icon="value.icon"
        :text="value.name"
        to="/coupon"
      />
    </van-grid>
    <van-cell icon="star-o" title="我的收藏" is-link to="/collect" />
    <van-cell icon="location-o" title="收货地址" is-link to="/address" />
    <van-cell icon="friends-o" title="服务中心" is-link to="/server" />
  </div>
</template>

<script>
export default {
  name: "me",
  components: {},
  data() {
    return {
      avatarUrl: "",
      nickName: "",
      // 我的订单
      myorder: [
        {
          id: 0,
          name: "待付款",
          icon: "debit-pay",
          goto: "/index",
        },
        {
          id: 1,
          name: "待发货",
          icon: "credit-pay",
          goto: "/classify",
        },
        {
          id: 2,
          name: "待收货",
          icon: "logistics",
          goto: "/car",
        },
        {
          id: 3,
          name: "已完成",
          icon: "shield-o",
          goto: "/me",
        },
      ],
      // 优惠卷
      coupon: [
        {
          id: 0,
          name: "待使用",
          icon: "balance-pay",
          goto: "/index",
        },
        {
          id: 1,
          name: "已使用",
          icon: "sign",
          goto: "/classify",
        },
        {
          id: 2,
          name: "过期关闭",
          icon: "coupon-o",
          goto: "/car",
        },
      ],
    };
  },
  // 计算属性
  computed: {},
  watch: {},
  mounted() {
    this.avatarUrl = localStorage.getItem("avatarUrl");
    this.nickName = localStorage.getItem("nickName");
  },
  methods: {
    information() {
      this.$router.push("/me/information");
    },
  },
};
</script>

<style lang="scss" scoped>
.me {
  .set {
    position: absolute;
    right: 16px;
    border-radius: 30%;
    top: 10px;
    font-size: 29px;
  }
  text-align: center;
  height: 120%;
  .head {
    width: 100%;
    height: 120%;
    background-color: red;
    border-radius: 15px;
    img {
      border-radius: 50%;
      margin-top: 0;
      margin: 0 auto;
      padding-top: 20px;
    }
    p {
      padding-bottom: 8vw;
    }
  }
  .van-cell {
    .van-cell__title {
      text-align: left;
    }
  }
}
</style>
